<template>
	<view class="consult">
		<u-navbar :is-back="false" :placeholder="true" title="咨询师"></u-navbar>
		<view class="bg"></view>
		<view :style="{ height: domHeight }" class="scrollWrap">
			<z-paging :fixed="false" style="position: absolute; width: 100%; height: 100%; top: 0" ref="paging" v-model="dotList" @query="queryList">
				<view slot="top">
					<!-- <zb-dropdown-menu style="width: 100%">
						<zb-dropdown-item name="first" :options="adeptList" v-model="queryParams.crowdCode" @change="selectcrowdCode"></zb-dropdown-item>
						 <zb-dropdown-item
					    name="two"  
					    :options="option2" 
					    v-model="value2" 
					    @change="change2"
					    ></zb-dropdown-item>
					</zb-dropdown-menu> -->
					<view class="search-con">
						<view>
							<view class="bo" v-for="(item, index) in searchList" :key="index">
								<uni-collapse @change="handleSel(item)">
									<uni-collapse-item :open="item.open" :title="item.name"></uni-collapse-item>
								</uni-collapse>
							</view>
						</view>
					</view>
				</view>
				<template #empty>
					<emptyView />
				</template>
				<view class="consult-list" :class="dotList.length == 0 ? 'consult-none' : 'consult-nonelist'">
					<view class="consult-list-card">
						<view v-for="item in dotList" @click="handelAppoint(item)">
							<view class="left">
								<image :src="item.avatarUrl"></image>
							</view>
							<view class="right">
								<view>
									<text>{{ item.expertName }}</text>
									<!-- <view>
										<image src="@/static/newImg/index/leval.svg"></image>
									<text>成熟</text>
								</view> -->
									<view>{{ subTitle(item.title) }}</view>
								</view>
								<view>
									<view>{{ item.tags }}</view>
									<view>擅长：{{ item.domainName }}</view>
								</view>
								<view>
									<view>
										<text>
											<text style="font-weight: bold; color: #666">{{ item.totalConsultHours }}</text>
											<text>小时</text>
										</text>
										<text>
											<text>从业</text>
											<text style="font-weight: bold; color: #666">{{ item.workingYears }}</text>
											<text>年</text>
										</text>
									</view>
									<view>
										<image src="@/static/newImg/index/location.svg"></image>
										<text>{{ item.cityCopy }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</z-paging>
		</view>
		<uni-popup type="dialog" ref="popup" background-color="#fff">
			<view class="popup-content">
				<view class="head">
					<view class="bg"></view>
					<!-- <image class="bg" :src="$buildFullImageUrl('/static/consult/head-bg.png')"></image> -->
					<view class="con">
						<view>搜索</view>
						<view>
							<!-- <image @click="handelSearch" :src="$buildFullImageUrl('/static/evaluate/search.svg')"></image>
							<image @click="handelMyAtten" :src="$buildFullImageUrl('/static/consult/star-person.svg')"></image>
							<image @click="handelMyConsult" :src="$buildFullImageUrl('/static/consult/record.svg')"></image> -->
						</view>
					</view>
				</view>
				<view class="search-con">
					<view>
						<view class="bo" v-for="(item, index) in searchList" :key="index">
							<uni-collapse @change="handleSel(item)">
								<uni-collapse-item :open="item.open" :title="item.name"></uni-collapse-item>
							</uni-collapse>
						</view>
					</view>
				</view>
				<view class="con-container">
					<select-adress-vue @confirmSel="confirmSel" :selectTab="selectTab" v-if="selectTab"></select-adress-vue>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { getExpertList } from '@/api/consult/index.js';
import { getLastPartAfterLastComma } from '@/utils/common.js';
import config from '@/config';
import { getDoc } from '@/api/index/index.js';
import selectAdressVue from '@/components/selectAddress/selectAdress.vue';
export default {
	data() {
		return {
			adeptList: [],
			value1: 0,
			option: [
				{
					text: '全部商品',
					value: 0
				},
				{
					text: '新款商品',
					value: 1
				},
				{
					text: '活动商品',
					value: 2
				}
			],
			value: ['0'],
			domHeight: '',
			bgHeight: '',
			dotList: [],
			queryParams: {
				crowdCode: ''
			},
			searchList: [
				{
					name: '城市',
					open: false
				},
				{
					name: '擅长对象',
					open: false
				}
			],
			selectTab: ''
		};
	},
	components: {
		selectAdressVue
	},
	onShareAppMessage() {
		return {
			title: '仰望心理'
			// ...其他配置
		};
	},
	onLoad() {
		getDoc({
			dictType: 'specific'
		}).then((res) => {
			console.log(res.rows);
			let arr = res.rows;
			this.adeptList = [
				{
					value: '',
					text: '全部'
				}
			];
			arr.forEach((item) => {
				this.adeptList.push({
					value: item.dictValue,
					text: item.dictLabel
				});
			});
		});
	},
	onShow() {
		this.$refs.paging.reload();
	},
	methods: {
		selectcrowdCode(e) {
			console.log(e);
			this.queryParams.crowdCode = e.value;
			this.$refs.paging.reload();
		},
		subTitle(str) {
			const index = str.indexOf('、');
			const copy = index > -1 ? str.substring(0, index) : str;
			return copy;
		},
		getInit() {
			// getExpertList().then(res=>{
			// })
		},
		queryList(pageNum, pageSize) {
			const querys = {
				pageNum,
				pageSize,
				...this.queryParams
			};
			getExpertList(querys).then((res) => {
				let list = [...res.rows];
				// console.log(list);
				list.map((i) => {
					i.cityCopy = getLastPartAfterLastComma(i.city);
				});
				// console.log(list);
				this.$refs.paging.completeByTotal(list, res.total);
				// this.$refs.paging.complete(list);
			});
		},
		handelAppoint(e) {
			this.$tab.navigateTo(`/subset/pages/consult/consultDetail?id=${e.id}`);
		},
		handelSearch() {
			this.$tab.navigateTo(`/subset/pages/consult/search/index`);
		},
		handelMyAtten() {
			this.$tab.navigateTo(`/subset/pages/consult/search/myAttent`);
		},
		handelMyConsult() {
			this.$tab.navigateTo(`/subset/pages/consult/search/myConsult`);
		},
		handleSel(e) {
			this.selectTab = e.name;
			this.$refs.popup.open('top');
			// console.log(e);
			const result = this.updateStatus(this.searchList, (item) => item.name === e.name, true);

			// console.log(result);
			this.searchList = result;
		},
		confirmSel(e) {
			this.$refs.popup.close();
			this.selectTab = '';
			if (e.reset) {
				//重置
				this.queryParams = {};
			} else {
				const crowCodeArr = e.adeptList;
				const crowCodeStr = crowCodeArr.join(',');
				this.queryParams = {
					gender: e.sexId ? e.sexId : '',
					cityCode: e.area ? `${e.province},${e.city},${e.area}` : '',
					appointmentStatus: e.appointId ? e.appointId : '',
					crowdCode: crowCodeStr ? crowCodeStr : ''
				};
			}
			// console.log(e);

			this.$refs.paging.reload();
		},
		updateStatus(arr, condition, newStatus) {
			return arr.map((item) => {
				return condition(item) ? { ...item, open: newStatus } : { ...item, open: !newStatus };
			});
		}
	},
	mounted() {
		this.domHeight = uni.getStorageSync('domHeight');
		this.bgHeight = `calc(100% - ${this.domHeight} + 88rpx)`;
		// console.log(this.domHeight);
	}
};
</script>

<style scoped lang="scss">
@import url('@/static/font/navBar.less');
.consult {
	width: 100%;
	height: 100%;
	position: relative;
	background-color: #f6f7ff;
	.bg {
		width: 100%;
		height: 40%;
		// background: linear-gradient(127deg, #a4dcb3 0%, #ffeed6 37%, #d3fffb 100%);
		// border-radius: 0rpx 0rpx 80rpx 80rpx;
		position: fixed;
		top: 0;
	}
	.scrollWrap {
		width: 100%;
		padding-bottom: 20rpx;
		position: relative;
	}
	.head {
		width: 100%;
		height: 88rpx;
		position: relative;
		padding: 20rpx 0;

		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			background: #fff;
			top: 0;
		}

		.con {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			padding: 24rpx 40rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			> view:nth-child(1) {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}

			> view:nth-child(2) {
				image:nth-child(1) {
					width: 37rpx;
					height: 40rpx;
				}

				image:nth-child(2) {
					width: 42rpx;
					height: 40rpx;
					margin: 0 58rpx 0;
				}

				image:nth-child(3) {
					width: 38rpx;
					height: 41rpx;
				}
			}
		}
	}

	.search-con {
		width: 100%;
		height: 88rpx;
		background-color: #f5f4f8;
		> view:first-child {
			padding: 30rpx 120rpx 30rpx 120rpx;
			box-sizing: border-box;
			width: 100%;
			display: flex;
			justify-content: space-between;

			.bo {
				::v-deep .uni-collapse-item {
					height: 44rpx !important;
				}

				::v-deep .uni-collapse-item__title {
					height: 44rpx !important;
					background-color: #f5f4f8;
					border: none;
				}

				::v-deep .uni-collapse-item__title-wrap {
					height: 44rpx !important;
					background-color: #f5f4f8;
				}

				::v-deep .uni-collapse-item__title-box {
					height: 44rpx !important;
					padding: 0;
					line-height: 44rpx;
					background-color: #f5f4f8;
				}

				::v-deep .uni-collapse-item__title-text {
					height: 44rpx !important;
					padding: 0;
					background-color: #f5f4f8;
				}

				::v-deep .uni-collapse-item__title-arrow {
					background-color: #f5f4f8;
				}

				::v-deep .uni-collapse-item__wrap {
					display: none;
				}
			}
		}
	}

	.consult-list {
		width: 100%;
		background: #ffffff;
		border-radius: 20rpx;
		// margin-top: 16rpx;
		padding: 32rpx 24rpx;
		box-sizing: border-box;
		padding-top: 0;
		.consult-list-card {
			width: 100%;

			> view {
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 24rpx 0 22rpx 0;
				border-bottom: 2rpx solid #eeeeee;

				.left {
					width: 184rpx;
					height: 182rpx;
					border-radius: 12rpx;
					overflow: hidden;
					> image {
						width: 100%;
						height: 100%;
					}
				}

				.right {
					width: calc(100% - 198rpx);
					display: flex;
					flex-wrap: wrap;
					align-content: space-between;

					> view:nth-child(1) {
						width: 100%;
						display: flex;
						padding-top: 10rpx;

						> text:nth-child(1) {
							font-weight: 600;
							font-size: 30rpx;
							color: #4a548a;
						}

						> view:nth-child(2) {
							padding: 4rpx 16rpx;
							background: #eef4ff;
							border-radius: 8rpx;
							border: 2rpx solid rgba(74, 84, 138, 0.102);
							font-weight: 400;
							font-size: 20rpx;
							color: #132066;
							margin-left: 20rpx;
						}
					}

					> view:nth-child(2) {
						width: 100%;

						> view {
							width: 100%;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
							font-weight: 400;
							font-size: 24rpx;
							color: #696b7b;
						}

						> view:nth-child(1) {
							margin-bottom: 8rpx;
						}
					}

					> view:nth-child(3) {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						> view:nth-child(1) {
							font-weight: 400;
							font-size: 24rpx;
							color: #696b7b;

							> text:nth-child(2) {
								margin-left: 16rpx;
							}
						}

						> view:nth-child(2) {
							display: flex;
							align-items: center;

							> image {
								width: 22rpx;
								height: 22rpx;
							}

							> text {
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
								margin-left: 6rpx;
							}
						}
					}
				}
			}

			> view:last-child {
				border: none;
				padding-bottom: 0;
			}
		}
	}

	.box-con {
		width: 100%;
	}
	.popup-content {
		width: 100%;
		height: 800rpx;
		padding-top: 85rpx;
		// background: linear-gradient(127deg, #a4dcb3 0%, #ffeed6 37%, #d3fffb 100%) !important;
		.search-con {
			width: 100%;
			height: 80rpx;
			background: linear-gradient(127deg, #a4dcb3 0%, #ffeed6 37%, #d3fffb 100%) !important;
			> view:first-child {
				padding: 22rpx 60rpx 22rpx 44rpx;
				box-sizing: border-box;
				width: 100%;
				display: flex;
				justify-content: space-between;
				// border-bottom: 1rpx solid #d8d8d8;
				border-bottom: 1rpx solid #eee;
				background-color: #fff !important;
				.bo {
					// width: 25%;
					::v-deep .uni-collapse-item {
						height: 40rpx !important;
					}

					::v-deep .uni-collapse-item__title {
						height: 40rpx !important;
						background-color: #fff !important;
						border: none;
					}

					::v-deep .uni-collapse-item__title-wrap {
						height: 40rpx !important;
						background-color: #fff !important;
					}

					::v-deep .uni-collapse-item__title-box {
						height: 40rpx !important;
						padding: 0;
						line-height: 40rpx;
						background-color: #fff !important;
					}

					::v-deep .uni-collapse-item__title-text {
						height: 40rpx !important;
						padding: 0;
						background-color: #fff !important;
					}

					::v-deep .uni-collapse-item__title-arrow {
						background-color: #fff !important;
					}

					::v-deep .uni-collapse-item__wrap {
						display: none;
					}
				}
			}
		}

		.con-container {
			width: 100%;
			height: calc(100% - 168rpx);
			// border-top: 1rpx solid #d8d8d8;
		}
	}
}
::v-deep .u-navbar {
	background: linear-gradient(127deg, #a4dcb3 0%, #ffeed6 37%, #d3fffb 100%) !important;
}
.consult-none {
	padding: 0 !important;
}
</style>
